<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
            <el-form-item label="模板名称" prop="paramName">
                <el-input v-model="queryParams.templateName" placeholder="请输入模板名称" clearable size="small"
                    style="width: 240px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="状态" prop="paramType">
                <el-select v-model="queryParams.enable" clearable placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button v-preventReClick type="primary" icon="el-icon-search" size="mini"
                    @click="handleQuery">搜索</el-button>
                <el-button v-preventReClick icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="2" :offset="22">
                <el-button v-preventReClick type="primary" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="tempList" class="margin-top">
            <el-table-column label="模板名称" prop="templateName" :show-overflow-tooltip="true" />
            <el-table-column label="状态" :show-overflow-tooltip="true">
                <template v-slot="scope">
                    <div>
                        {{ scope.row.enable == 1 ? '已启用' : '已禁用' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" :formatter="$util.YYMM" />
            <el-table-column label="创建人" prop="creator" />
            <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
                <template v-slot="scope">
                    <div>
                        <el-button v-preventReClick size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
                        <el-button v-if="scope.row.enable < 1" v-preventReClick size="mini" type="text"
                            @click="handleEnable(scope.row)">启用</el-button>
                        <el-button v-if="scope.row.enable == 1" v-preventReClick size="mini" type="text"
                            @click="handleEnable(scope.row)">禁用</el-button>
                        <el-button v-if="scope.row.enable < 1" v-preventReClick size="mini" type="text"
                            @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button v-if="scope.row.enable < 1" v-preventReClick size="mini" type="text"
                            @click="handleDelete(scope.row)">删除</el-button>

                    </div>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
    </div>
</template>
  
<script>
import {
    listEvidence, addEvidence, deleteEvidence, updateEvidence, enableEvidence, detailEvidence
} from "@/api/testify/template";


export default {
    components: {
    },
    name: "testifyTemplate",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            tempList: [
                {
                    "id": 1,
                    "templateName": "模板1",
                    "enable": 0,
                    "templateContent": "测试测试1",
                    "createId": 1423423432423,
                    "creator": "老大",
                    "createTime": 1423423432423
                },
                {
                    "id": 2,
                    "templateName": "模板2",
                    "enable": 1,
                    "templateContent": "测试测试2",
                    "createId": 14234234324234,
                    "creator": "老二",
                    "createTime": 1423423432423
                },
            ],

            typeList: [{
                value: 0,
                label: '已禁用'
            }, {
                value: 1,
                label: '已启用'
            }],

            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                templateName: undefined,
                enable: undefined
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true;
            listEvidence(this.queryParams).then(
                response => {
                    this.tempList = response.data.list;
                    this.total = response.data.total;
                    this.loading = false;
                }
            ).catch(err => this.loading = false)


        },
        handleEnable(row) {

            this.$confirm(`确定${row.enable == 1 ? '禁用' : '启用'}此模板吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                enableEvidence({ id: row.id, enable: row.enable == 1 ? 0 : 1 }).then(
                    res => {
                        if (res.code == 0) {
                            this.$modal.msgSuccess(`${row.enable == 1 ? '禁用' : '启用'}成功`);
                            this.getList();
                        }
                    }
                ).catch()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleDelete(row) {
            this.$confirm('确定删除此模板吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteEvidence({ id: row.id }).then(
                    res => {
                        if (res.code == 0) {
                            this.$modal.msgSuccess("删除成功");
                            this.getList();
                        }
                    }
                ).catch()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        handleAdd() {
            this.$router.push({ path: '/testifySetup/add' })
        },
        handleView(row) {
            sessionStorage.setItem('testifyRowDetail', JSON.stringify(row))
            this.$router.push({ path: '/testifySetup/detail' })
        },
        handleUpdate(row) {
            sessionStorage.setItem('testifyRowUpdate', JSON.stringify(row))
            this.$router.push({ path: '/testifySetup/update' })
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNo = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNo: 1,
                pageSize: 10,
                templateName: undefined,
                enable: undefined
            }
            this.handleQuery();
        },
    }
};
</script>
<style lang="scss" scoped></style>
  